import 'package:common/common.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class CodeTextFieldWidget extends StatefulWidget {
  const CodeTextFieldWidget({
    super.key,
    this.onChanged,
    this.onSubmit,
    this.onClick,
    this.rightWidget,
    this.height,
    this.border,
    this.borderRadius = 24.0,
    this.backgroundColor = const Color(0xFFF1F8FF),
  });

  final double? height;
  final Widget? rightWidget;
  final Function? onChanged;
  final Function? onSubmit;
  final Function? onClick;

  final Border? border;
  final double? borderRadius;
  final Color? backgroundColor;

  @override
  State<CodeTextFieldWidget> createState() => _CodeTextFieldWidgetState();
}

class _CodeTextFieldWidgetState extends State<CodeTextFieldWidget> {
  TextEditingController controller = TextEditingController();
  FocusNode focusNode = FocusNode();

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      height: widget.height ?? 50.h,
      padding: EdgeInsets.only(left: 10.w, right: 10.w),
      decoration: BoxDecoration(
          color: widget.backgroundColor,
          borderRadius: BorderRadius.circular(widget.borderRadius ?? 24),
          border: widget.border ?? Border.all(color: const Color(0xffE9E9E9), width: 0)),
      child: Row(
        children: [
          Image.asset('assets/app/images/auth/auth_input_verif_code.png', width: 22.w),
          Expanded(
            child: Container(
              padding: EdgeInsets.only(left: 10.h),
              child: SizedBox(
                child: TextField(
                  maxLength: 6,
                  focusNode: focusNode,
                  controller: controller,
                  obscureText: false,
                  cursorWidth: 2,
                  cursorColor: const Color(0xFF2CC0B1),
                  // cursorHeight: 18.h,
                  autofocus: false, // 指不自动获取焦点
                  onChanged: (value) {
                    widget.onChanged?.call(value);
                    setState(() {});
                  },
                  onSubmitted: (value) {
                    widget.onSubmit?.call();
                  },
                  keyboardType: TextInputType.phone,
                  inputFormatters: [
                    FilteringTextInputFormatter.allow(RegExp(r'[0-9]')) //设置只允许输入数字
                  ],
                  style: TextStyle(color: const Color(0xFF000000), fontSize: 14.sp),
                  decoration: InputDecoration(
                      hintText: '请输入验证码',
                      counterText: '',
                      hintStyle: TextStyle(color: const Color(0xFF999999), fontSize: 15.sp),
                      border: InputBorder.none),
                ),
              ),
            ),
          ),
          if (controller.text.isNotEmpty)
            Icon(Icons.cancel, size: 20.w, color: const Color(0xFFADB4B3)).onTap(() {
              controller.text = '';
              widget.onChanged?.call('');
              setState(() {});
            }),
          if (widget.rightWidget != null)
            Container(margin: const EdgeInsets.only(left: 20), child: widget.rightWidget!),
        ],
      ),
    );
  }
}
